<template>
  <div :id="props.id"
        :style="{width: props.width, height: props.height}"
  ></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, onUnmounted, defineProps} from 'vue';

export interface BarInterface {
  title: string;
  xData: string[];
  yData: number[];
}

const props = defineProps({
  id: {
    type: String,
    default: 'bar'
  },
  theme: {
    type: String,
    default: '' // dark
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  data: {
    type: Object,
    default: () => {
      return {
        title: '柱状图',
        xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        yData: [120, 200, 150, 80, 70, 110, 130]
      }
    }
  },
  option: {
    type: Object,
    default: () => {
      return {
        title: {
          text: '基础柱状图',
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['测试'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: [120],
          type: 'bar'
        }]
      }
    }
  }
});

onMounted(() => {
  init()
});

function init() {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  props.option.title.text = props.data.title;
  props.option.xAxis.data = props.data.xData;
  props.option.series[0].data = props.data.yData;
  basicBar.setOption(props.option);
}

function resize() {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  basicBar.resize();
}

onMounted(() => {
  window.addEventListener('resize', resize);
});

onUnmounted(() => {
  window.removeEventListener('resize', resize);
});

function refreshChart(data : BarInterface) {
  const basicBar = echarts.init(document.getElementById(props.id), props.theme);
  props.option.title.text = data.title;
  props.option.xAxis.data = data.xData;
  props.option.series[0].data = data.yData;
  basicBar.setOption(props.option);
}

defineExpose({
  refreshChart
});


</script>

<style scoped>

</style>